<template>
  <div ref="iconSelectRef" :style="'width:' + width">
    <el-popover v-model="popoverVisible" :width="width" placement="bottom-end">
      <template #reference>
        <el-input
            class="reference"
            v-model="selectedIcon"
            readonly
            placeholder="点击选择图标"
            @click="popoverVisible = !popoverVisible"
        >
          <template #prepend v-if="selectedIcon">
            <template
                v-if="selectedIcon.startsWith('el-icon-')">
              <i :class="selectedIcon"></i>
            </template>
            <template v-else>
              <svg-icon :icon-class="selectedIcon"></svg-icon>
            </template>
          </template>
          <template #append>
            <i class="el-icon-arrow-down" :style="{
                transform: popoverVisible ? 'rotate(180deg)' : 'rotate(0)',
                transition: 'transform .5s',}"
               @click="popoverVisible = !popoverVisible">
            </i>
          </template>
        </el-input>
      </template>

      <div style="max-width: 500px">
        <el-input
            v-model="searchText"
            placeholder="搜索图标"
            clearable
            @input="filterIcons"
        />
        <el-tabs v-model="activeTab" @tab-click="handleTabClick">
          <el-tab-pane label="SVG 图标" name="svg">
            <div style="height: 300px;overflow-y: scroll">
              <ul class="icon-container">
                <li
                    v-for="icon in filteredSvgIcons"
                    :key="'svg-' + icon"
                    class="icon-item"
                    @click="selectIcon(icon)"
                >
                  <el-tooltip :content="icon" placement="bottom" effect="light">
                    <svg-icon :icon-class="icon"></svg-icon>
                  </el-tooltip>
                </li>
              </ul>
            </div>
          </el-tab-pane>
          <el-tab-pane label="Element 图标" name="element">
            <div style="height: 300px;overflow-y: scroll">
              <ul class="icon-container">
                <li
                    v-for="icon in filteredEpIcons"
                    :key="icon"
                    class="icon-item"
                    @click="selectIcon(icon)"
                >
                  <el-tooltip :content="icon" placement="bottom" effect="light">
                    <i :class="icon"></i>
                  </el-tooltip>
                </li>
              </ul>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </el-popover>
  </div>
</template>

<script>
import element_icon_arr from './element-icon'

export default {
  name: 'icon-picker',
  props: {
    width: {
      type: String,
      require: false,
      default: "500px",
    },
  },

  data() {
    return {
      popoverVisible: false,
      selectedIcon: undefined,
      activeTab: 'svg',
      searchText: '',
      popoverContentRef: undefined,
      svgIcons: [],
      filteredSvgIcons: [],

      epIcons: element_icon_arr,
      filteredEpIcons: [],
    }
  },
  mounted() {
    this.loadIcons();
  },
  methods: {
    loadIcons() {
      const req = require.context('../../icons/svg', false, /\.svg$/)
      req.keys().forEach(path => {
        const iconName = path.replace(/.*\/(.*)\.svg$/, "$1");
        this.svgIcons.push(iconName);
      })
      this.filteredSvgIcons = this.svgIcons;
      console.log(this.svgIcons)
    },
    handleTabClick(tabPane) {
      this.activeTab = tabPane.name;
      this.filterIcons();
    },
    filterIcons() {
      if (this.activeTab === "svg") {
        // 过滤SVG图标逻辑
        this.filteredSvgIcons = this.searchText
            ? this.svgIcons.filter((iconName) =>
                iconName.toLowerCase().includes(this.searchText.toLowerCase())
            )
            : this.svgIcons;
      } else {
        // 过滤Element Plus图标逻辑 TODO
        this.filteredEpIcons = this.searchText
            ? this.epIcons.filter((iconName) =>
                iconName.toLowerCase().includes(this.searchText.toLowerCase())
            )
            : this.epIcons;
      }
    },
    selectIcon(iconName) {
      this.selectedIcon = iconName
      this.popoverVisible = false;
      this.$emit("onSelect", iconName)
      console.log(this.popoverVisible)
      this.$forceUpdate()
    }
  }
}
</script>

<style scoped>
.svg-icon, i {
  width: 1.2em;
  height: 1.2em;
  vertical-align: -0.18em;
  fill: currentColor;
  overflow: hidden;
}

.reference :deep(.el-input__wrapper),
.reference :deep(.el-input__inner) {
  cursor: pointer;
}

.icon-container {
  display: flex;
  flex-wrap: wrap;

  .icon-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    margin: 4px;
    cursor: pointer;
    border: 1px solid #dcdfe6;
    border-radius: 4px;
    transition: all 0.3s;
  }

  .icon-item:hover {
    border-color: #409eff;
    scale: 1.2;
  }
}
</style>
